<!--
 * @Author: yansheng 610363806@qq.com
 * @Date: 2024-07-06 20:20:11
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-07-31 17:34:09
 * @FilePath: \cell-admin\src\pages\active\activeUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-drawer
    title="报名用户"
    placement="right"
    width="800"
    @close="openDia = false"
     :maskClosable='false'
    :keyboard='false'
    v-model:open="openDia"
  >
  <div class="header-tool">
    <a-input-search
        style="width: 200px; margin-right: 10px"
        v-model:value="searchNo"
        placeholder="请输入订单号搜索"
          @search="onSearch"
      />
      <a-input-search
        style="width: 200px; margin-right: 10px"
        v-model:value="searchValue"
        placeholder="请输入手机号搜索"
          @search="onSearch"
      />
      <a-button
        style="margin-right: 20px"
        class="mr10"
        type="primary"
        enter-button
        @click="onSearch()"
      >
        搜索
      </a-button>
    <a-button
      type="primary"
      :disabled="mapRows.length == 0"
      @click="batchSendSms()"
    >
      批量发送短信
    </a-button>
    </div>
    <!-- <a  >批量发送短信</a> -->

    <a-table
      :row-key="(record) => record.uid"
      :loading="loading"
      :rowSelection="{
        onChange: onSelectChange,
        selectedRows: selectedRows,
        selectedRowKeys: mapRows
      }"
      :columns="IntegralColumns"
      :dataSource="IntegralActivities"
      @change="handleTableChange"
      :pagination="
        isObject(pagination)
          ? {
              showQuickJumper: true,
              total: pagination.total,
              current: pagination.current,
              pageSize: pagination.pageSize,
              showTotal: (total) => `共计 ${pagination.total} 条`
            }
          : false
      "
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'User'">
          <div
            class="user-info"
            v-if="record.User && record.User.avatar"
          >
            <img
              class="user-info-avatar"
              style=""
              :src="record.User.avatar"
              alt=""
            />
            <div class="user-name">
              <div class="name">{{ record.User.user_name }}</div>
              <div class="phone">{{ record.User.phone }}</div>
            </div>
          </div>
        </template>
        <template v-if="column.dataIndex ==='enroll_status'">
          <a-tag color="green" v-if="record.enroll_status==0">待支付</a-tag> 
          <a-tag color="cyan"  v-if="record.enroll_status==1&& record.enroll_finish==0">待使用</a-tag>
          <a-tag color="blue" v-if="record.enroll_status==1&& record.enroll_finish==1">已使用</a-tag>
          <a-tag color="purple"  v-if="record.enroll_status==-1">已退款</a-tag>
          <a-tag color="purple"  v-if="record.enroll_status==2">已关闭</a-tag>
          <a-tag color="purple"  v-if="record.enroll_status==3">退款中</a-tag>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <span>
            
            <a @click="sendMsg(record.User)">发短信</a>
            <br>
            <a @click="returnMoney(record)" v-if="record.enroll_status==1&& record.enroll_finish==0">退款</a>
          </span>
        </template>
      </template>
    </a-table>
  </a-drawer>
  <smsModel
    ref="sendEle"
    @sendOk="sendOk"
  />
</template>

<script setup>
  import { message } from 'ant-design-vue'
  import { isObject } from 'lodash-es'
  import smsModel from './../user/list/smsModel.vue'
  import { ref, reactive, toRefs, onMounted } from 'vue'
  import {  activeUser ,wxpayRefund} from '@/api/index'
  const openDia = ref(false)
 
  const IntegralActivities = ref([])
  const sendOk = () => {
    getUserList()
  }
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const searchValue = ref("")
  const searchNo=ref("")
  const onSearch = () => {
    pagination.current = 1
    getUserList()
  }
  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    getUserList()
  }
  const IntegralColumns = [
    {
      title: 'ID',
      dataIndex: 'uid',
       width: '50px',
    },
    {
      title: '用户信息',
      dataIndex: 'User'
    },
    {
      title: '订单号',
      dataIndex: 'enroll_number',
      width: '120px',
      
    },
    
    {
      title: '报名时间',
      dataIndex: 'created_at',
      width: '120px',
    },
    {
      title: '支付状态',
      dataIndex: 'enroll_status',
      width: '120px',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: '120px',
    }
  ]
  const selects = ref([])
  const sendEle = ref(null)
  const mapRows = ref([])
  const onSelectChange = (selectedRowKeys, selectedRows) => {
    mapRows.value = selectedRowKeys
    selects.value = selectedRows
  }
  const batchSendSms = () => {
    sendEle.value.init(
      1,
      selects.value.map((val) => val.User)
    )
  }
  const returnMoney = (row) => {
   
    wxpayRefund({
      enroll_id :row.enroll_id
    }).then(res=>{
      if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
      message.success(res.msg||'退款成功')
      getUserList()
    })
  }
  const sendMsg = (record) => {
    sendEle.value.init(0, record)
  }
  const activityId=ref(null)
  const getUserList=()=>{
    activeUser({
      activity_id: activityId.value,
      enroll_number:searchNo.value,
      page:pagination.current,
      pageSize: pagination.pageSize,
      phone:searchValue.value
    }).then((res) => {
      if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
      IntegralActivities.value = res.data
    })
  }
  const init = (row) => {
    openDia.value = true
    activityId.value = row.activity_id
    getUserList()
  }
  
  defineExpose({
    init
  })
</script>
<style scoped lang="less">
 .header-tool {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
  }

  .user-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .user-info-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
</style>
